<template>
  <div>
    <HeaderTop :enable-shadow="true"/>

    <el-row>
      <el-col :span="2">
        <pre> </pre>
      </el-col>

      <!--显示约拍信息-->
      <el-col :span="14">



        <div class="al-m-10px">
          <CitySelectorComponent @getSonData="getCityName"
                                 default-active-city="全部"
                                 :show-title="true"
                                 :city-data="cityData"/>
        </div>

<!--        <div class="al-m-10px">-->
<!--          <TypeSelectorComponent :type-data="typeData"-->
<!--                                 :default-active-type="typeData[0].name" />-->
<!--        </div>-->

        <div v-if="allAppointment.list == 0">
          <EmptyTip class="al-m-10px"/>
        </div>

        <div v-else>
          <ShowAppointmentComponent :all-appointment="allAppointment.list" />


        </div>


        <!--分页-->
        <div class="al-box-container">
          <el-pagination
                  v-if="allAppointment.list != 0"
                  background
                  :page-size="allAppointment.pageSize"
                  @next-click="getAllAppointmentByCity(currentCity, allAppointment.nextPage)"
                  @prev-click="getAllAppointmentByCity(currentCity, allAppointment.prePage)"
                  @current-change="handlePageChange"
                  layout="prev, pager, next"
                  :total="allAppointment.total">
          </el-pagination>
        </div>


      </el-col>


      <!--侧边栏-->
      <el-col :span="6">
        <div @click="goPage('/appointment/add/' + ' ')" class="al-cursor-pointer">
          <div class="al-m-top-20px al-box-shadow-radius al-box-container al-hover-shadow">
            <ALImage
                    class="al-width-50 al-hover-img"
                    src="https://alanlee-panda-appointment.oss-cn-shenzhen.aliyuncs.com/images/chahua/undraw_moments_0y20.png"/>

            <div class="">
              快来发布你的约拍吧！
            </div>
          </div>
        </div>

        <WeatherComponent :city="currentCity" />

        <AppointmentType/>
      </el-col>
      <el-col :span="2">
        <pre> </pre>
      </el-col>
    </el-row>


    <ALFooter></ALFooter>
  </div>

</template>

<script>
  import {request} from "@/util/network/request";
  import HeaderTop from "@/components/public/HeaderTop";
  import AvatarNickname from "@/components/public/AvatarNickname";
  import DescText from "@/pages/appointment/component/DescText";
  import AppointmentType from "@/pages/appointment/component/AppointmentType";
  import ALImage from "@/components/public/ALImage";
  import ALFooter from "../../components/public/ALFooter";
  import CitySelectorComponent from "./component/CitySelectorComponent";
  import {
    APPOINTMENT_GET_BY_CITY,
    APPOINTMENT_GET_PAGINATION
  } from "../../util/network/api/appointment/api-appointment";
  import {LOCAL_BASE_URL} from "../../util/network/api/base/api-base";
  import EmptyTip from "../../components/public/EmptyTip";
  import {getTimeFormat} from "../../util/time/TimeUtils";
  import TypeSelectorComponent from "./component/TypeSelectorComponent";
  import WeatherComponent from "./component/WeatherComponent";
  import ShowAppointmentComponent from "./component/ShowAppointmentComponent";

  export default {
    name: "AllAppointment",
    mounted() {
      this.getAllAppointmentByCity();
    },
    data() {
      return {
        allAppointment: {},
        cityData: [
          {
            id: 0,
            name: "全部"
          },
          {
            id: 1,
            name: "北京"
          },
          {
            id: 2,
            name: "上海"
          },
          {
            id: 3,
            name: "广州"
          },
          {
            id: 4,
            name: "深圳"
          }
        ],

        typeData: [
          {
            id: 0,
            name: "全部"
          },
          {
            id: 1,
            name: "普通拍照"
          },
          {
            id: 2,
            name: "毕业照"
          },
          {
            id: 3,
            name: "婚纱照"
          },
          {
            id: 4,
            name: "电商模特"
          }
        ],

        currentCity: '全部',
      }
    },
    components: {
      ShowAppointmentComponent,
      WeatherComponent,
      EmptyTip,
      CitySelectorComponent,
      ALFooter,
      ALImage,
      AppointmentType,
      HeaderTop
    },
    methods: {
      goPage: function (path) {
        this.gotoPage(path);
      },

      getAllAppointmentByCity(city = "全部", pageNum = 1, pageSize = 3) {

        request({
          url: APPOINTMENT_GET_BY_CITY + `${city}?pageNum=${pageNum}&pageSize=${pageSize}`
        }).then(res => {
          // console.log(res);
          this.allAppointment = res.data.data;
          this.allAppointment.list.map(item => {
            item.createTime = getTimeFormat(item.createTime);
          });

          // console.log(this.allAppointment);

        }).catch(err => {
          console.log(err);

        });
      },

      //分页页号监听事件
      handlePageChange(pageNum) {
        console.log(pageNum);
        this.getAllAppointmentByCity(this.currentCity, pageNum);
      },


      getCityName(city) {
        console.log(city);
        this.currentCity = city;
        this.getAllAppointmentByCity(city)
      },

      timeFormat(val) {
        this.formatTime = getTimeFormat(val);
      }
    }
  }
</script>

<style scoped>


</style>
